<template>
  <!-- 登陆 -->
  <div class="login-container">
    <div class="geometric-bg">
      <div class="shape1"></div>
      <div class="shape2"></div>
    </div>

    <div class="login-card">
      <div class="logo-section">
        <div class="logo-box">
          <img src="../components/picture/生成相关图片 (2).png" alt="公司LOGO" class="logo-image">
        </div>
        <h1>远帆起航仓库管理公司</h1>
      </div>

      <el-form class="login-form">
        <el-form-item>
          <el-input v-model="data.userName" placeholder="账号" class="custom-input">
            <template #prefix>
              <div class="input-prefix">
                <el-icon class="input-icon">
                  <User />
                </el-icon>
                <div class="divider"></div>
              </div>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-input v-model="data.password" type="password" placeholder="密码" class="custom-input">
            <template #prefix>
              <div class="input-prefix">
                <el-icon class="input-icon">
                  <Lock />
                </el-icon>
                <div class="divider"></div>
              </div>
            </template>
          </el-input>
        </el-form-item>

        <el-button type="primary" class="dynamic-btn" @click="handleLogin">
          立即登录
        </el-button>

        <div class="helper-links">
          <el-link type="info" @click="showForgot">忘记密码?</el-link>
          <el-link type="primary" @click="showRegister">新用户注册</el-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import type { LoginData, LoginResult } from '@/api/type'
import { Login } from '@/api/Index'
import { ElMessage } from 'element-plus'
import { useCounterStore } from "@/stores/counter"
const store = useCounterStore()
const router = useRouter()
const data = ref<LoginData>({
  userName: '',
  password: ''
})

const handleLogin = async () => {
  try {
    const result: LoginResult = await Login(data.value);

    console.log(result)
    if (result.code === 200) {
      ElMessage({
        message: ' 登陆成功',
        type: 'success',
      })
      router.push({ name: 'Main' });


    }
    else {
      ElMessage({
        message: result.msg,
        type: 'error',
      })
    }
  } catch (err) {
    console.error('Login Failed:', err);
  }
};

// const handleLogin = () => {
//   Login(data.value).then(async (res: any) => {
//     const reuslt: LoginResult = await Login(data.value)
//     console.log(res)
//     console.log(reuslt)
//     if (res.code === 200) {
//       ElMessage({
//         message: '登陆成功',
//         type: 'success',
//       })
//       router.push({
//         name: 'Main'
//       });
//     }
//     else
//     {
//       ElMessage({
//         message: res.msg,
//         type: 'error',
//       })
//     }
//   }).catch((err) => {
//     console.error('Login Failed:', err);
//   })
// }

const showForgot = () => {
  // 忘记密码
}
const showRegister = () => {
  // 注册
}
</script>

<style scoped lang="scss">
.login-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--light-bg);
  position: relative;
  overflow: hidden;
}

.geometric-bg {
  position: absolute;
  width: 100%;
  height: 100%;

  .shape1 {
    position: absolute;
    right: -50px;
    top: -100px;
    width: 300px;
    height: 300px;
    background: linear-gradient(45deg, #ecf5ff, #b3d8ff);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    opacity: 0.6;
  }

  .shape2 {
    position: absolute;
    left: -80px;
    bottom: -120px;
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #f0f9eb, #e1f3d8);
    clip-path: circle(40% at 30% 30%);
    opacity: 0.4;
  }
}

.login-card {
  width: 400px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  z-index: 1;
  transition: transform 0.3s;
  animation: fadeInUp 0.5s ease-out both;

  &:hover {
    transform: translateY(-5px);
  }
}

.logo-section {
  text-align: center;
  margin-bottom: 40px;

  .logo-box {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    .logo-image {
      width: 100%;
      height: 100%;
      background: url("../components/picture/生成相关图片 (2).png") center/contain no-repeat;
      object-fit: contain;
    }
  }

  h1 {
    font-size: 24px;
    color: var(--text-dark);
    letter-spacing: 2px;
  }
}

$primary-color: var(--primary-color);
$input-border-radius: 28px;
$input-hover-color: #79bbff;

.dynamic-btn {
  width: 100%;
  height: 56px;
  border-radius: $input-border-radius;
  font-size: 16px;
  background: linear-gradient(45deg, $primary-color, $input-hover-color);
  border: none;
  letter-spacing: 2px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  color: var(--text-light);
  font-weight: bold;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent);
    transition: all 0.5s;
  }

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba($primary-color, 0.4);

    &::before {
      left: 100%;
    }
  }

  &:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba($primary-color, 0.2);
  }

  span {
    position: relative;
    z-index: 1;
  }
}

.helper-links {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

@keyframes fadeInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.custom-input {
  --el-input-height: 56px;
  --el-input-border-radius: #{$input-border-radius};
  --el-input-hover-border: #{$primary-color};
  --el-input-focus-border: #{$primary-color};

  :deep(.el-input__wrapper) {
    padding: 0 20px;
    background: #f5f7fa;
    transition: all 0.3s;

    &:hover {
      box-shadow: 0 0 0 1px var(--el-input-hover-border) inset;
    }

    &.is-focus {
      box-shadow: 0 0 0 2px var(--el-input-focus-border) inset;
    }
  }

  .input-prefix {
    display: flex;
    align-items: center;
    height: 100%;

    .input-icon {
      font-size: 20px;
      color: #606266;
      margin-right: 12px;
    }

    .divider {
      height: 60%;
      width: 1px;
      background: #dcdfe6;
      margin-right: 15px;
    }
  }

  :deep(.el-input__inner) {
    padding-left: 0 !important;
    font-size: 14px;
  }
}
</style>